<template>
  <div>
    <t-sticky>
      <t-navbar
        title="基本信息"
        :fixed="false"
        left-arrow
        @left-click="handleBack"
      />
    </t-sticky>
    <div class="warrper">
      <div class="border-b">
        <t-cell title="头像" hover>
          <template #rightIcon>
            <t-avatar shape="circle" :image="userInfo.avatar" />
          </template>
        </t-cell>
      </div>
      <div class="border-b">
        <t-cell title="昵称" :note="userInfo.userName" hover> </t-cell>
      </div>
      <div class="border-b">
        <t-cell title="ID" :note="userInfo.userId?.toString()" hover> </t-cell>
      </div>
      <div class="border-b">
        <t-cell title="性别" note="" hover> </t-cell>
      </div>
      <div class="border-b">
        <t-cell title="生日" note="" hover> </t-cell>
      </div>
      <div class="border-b">
        <t-cell title="国籍" note="" hover> </t-cell>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref } from "vue";
import { useRouter } from "vue-router";
const router = useRouter();
let userInfo = ref({});
// 返回上一页
const handleBack = () => {
  router.back();
};
const avatarUrl = "https://tdesign.gtimg.com/mobile/demos/avatar1.png";
onMounted(() => {
  userInfo.value = localStorage.getItem("userInfo")
    ? JSON.parse(localStorage.getItem("userInfo"))
    : {};
});
</script>
<style lang="scss" scoped>
.warrper {
  height: calc(100vh - 120px);
  overflow: auto;
  &::-webkit-scrollbar {
    display: none; /* 直接隐藏滚动条 */
  }
  background-color: $bf5-color;
}
.border-b {
  background-color: $b-color;
  border-bottom: 1px solid $be9-color;
}
</style>
